<template>
    <div class="myTemp">
        <button 
            :class="['btn', 'btn1', value<=min?'btnmin':'']" 
            @click="subtraction">
        </button>
        <input 
            :class="{'num':true, 'inputmin': value<=min}" 
            disabled 
            type="text" 
            v-model="value"
        >
        <button 
            :class="['btn', 'btn2', value>=max?'btnmax':'']" 
            @click="add">
        </button>
    </div>
</template>

<script>
    export default {
        name: '',
        props: {
            step: {
                type: Number,
                default: 1
            },
            setvalue: {
                type: Number,
                default: 0
            },
            min: {
                type: Number
            },
            max: {
                type: Number
            }
        },
        model: {
            prop: "setvalue",
            event: "input"
        },
        watch: {
            value(val) {
                this.$emit('input', val)
            },
            setvalue(val){
                this.value = val
            }
        },
        data() {
            return {
                value: this.setvalue
            }
        },
        methods: {
            add() {
                if(this.value>=this.max) {
                    return
                }
                this.value += this.step
            },
            subtraction() {
                if(this.value<=this.min) {
                    return
                }
                this.value -= this.step
            }
        }
    }
</script>

<style lang="scss" scoped>
    .myTemp{
        height: 48px;
        display: flex;
        justify-content: space-between;
        .btn{
            width: 48px;
            height: 48px;
            border: 2px solid rgba(229,229,229,1);
            border-radius: 50%;
            background: #ffffff;
            outline: none;
            position: relative;
        }
        .btn1{
            &::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                background-color: currentColor;
                content: '';
                width: 13px;
                height: 3px;
                color: #F17F2A;
            }
        }
        .btnmin{
            &::after {
                color: #B1B2B4!important;
            }
        }
        .btnmax{
            &::before {
                color: #B1B2B4!important;
            }
            &::after {
                color: #B1B2B4!important;
            }
        }
        .btn2{
            &::before {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                background-color: currentColor;
                content: '';
                width: 3px;
                height: 13px;
                color: #F17F2A;
            }
            &::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                background-color: currentColor;
                content: '';
                width: 13px;
                height: 3px;
                color: #F17F2A;
            }
        }
        .num{
            font-size:30px;
            font-weight:bold;
            color:rgba(50,50,50,1);
            line-height: 48px;
            margin: 0 22px;
            width: 64px;
            border: none;
            outline: none;
            text-align: center;
            background: transparent;
            -webkit-text-fill-color:#323232;
            opacity: 1;
            &.inputmin{
                -webkit-text-fill-color:#B1B2B4;
                opacity: 1;
            }
        }
    }
</style>